import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, Image, TouchableOpacity, Alert, FlatList, PixelRatio } from "react-native";
import { GLOBAL } from '../../../config/global';
import { Common } from '../../../component/common/Common.js';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { OrderCommon } from '../_common/common';
import serviceAPI from './_common/serviceAPI';

const scale = GLOBAL.SCALE;

export class ClaimIntention extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '壹化成交合并转单量',
      headerTintColor: '#000',
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#000' />,
      headerRight: null,
      headerStyle: style.headTow.headerStyle,
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center',
      }
    }
  };

  constructor(props) {
    super(props)
    console.log('props', props)
    let { bidOrderGroupId, mergeType, mdmCode, bidOrderGroupItemId } = props.navigation.state.params || {};
    this.state = {
      status: 'data',
      listData: [],
      refreshIcon: false,
    }
    this.reload = true; // 判断是整个页面刷新还是下拉刷新
    this.pageParams = {
      bidOrderGroupId, mergeType, mdmCode, bidOrderGroupItemId
    }
  }

  async componentWillMount() {
    await this.initPage();
  }

  initPage = async (refreshIcon) => {
    this.setState({
      status: this.reload ? 'loading' : 'data',
      refreshIcon: !this.reload
    })
    let res = await serviceAPI.findMerge(this.pageParams);
    if (res) {
      this.setState({
        status: res.length > 0 ? 'data' : 'empty',
        listData: res,
        refreshIcon: false
      })
    } else {
      this.setState({
        refreshIcon: false,
        status: 'error'
      })
    }
  }

  // 刷新页面
  reloadPage = () => {
    this.reload = true;
    this.initPage();
  }

  // 下拉刷新
  refresh() {
    this.reload = false;
    this.initPage();
  }

  _renderListItem = (data) => {
    let item = data.item
    return (
      <View>
        <View style={styles.flexTitle}>
          <Text style={styles.flexTime}>{item.corpName || '--'}</Text>
          <Text style={styles.flexTime}>{item.createTime || '--'}</Text>
        </View>
        <View style={styles.flexList}>
          <View style={styles.flexResource}>
            <View style={styles.flexResourceName}>
              <Text style={styles.flexResourceText}>资源包：{item.bidPackageId || '--'}</Text>
              {item.tranReportType && item.tranReportType == 'Q' ? (
                <Image style={styles.itemName} source={OrderCommon.iconData.quanHuaImg} />
              ) : null
              }
              {item.tranReportType && item.tranReportType == 'N' ? (
                <Image style={styles.itemName} source={OrderCommon.iconData.xianImg} />
              ) : null
              }
            </View>
            <View style={styles.flexaddress}>
              <Text style={styles.flexaddressName}>{item.areaName || '--'}</Text>
            </View>
          </View>
          <View style={styles.itemBorder}></View>
          <View>
            <View style={styles.flexProuct}>
              <Text style={styles.flexProuctName}>{item.goodsName || '--'}</Text>
              <Text style={styles.flexProuctMoney}>{item.price || '0'}<Text style={{ fontWeight: '400' }}> 元/吨</Text></Text>
            </View>
            <View style={[styles.flexProuct, styles.flexProuctnull, { justifyContent: 'flex-end' }]}>
              <Text style={styles.flexProuctName}></Text>
              <Text style={styles.flexProuctMeber}> {item.quantity || '0'} 吨</Text>
              <Text style={styles.remaining}>（已转单：{(item.tranNum || item.tranNum == 0) ? item.tranNum : '-'}吨）</Text>
            </View>
          </View>
          <View style={styles.itemBorder}></View>
          <View style={styles.flexBranch}>
            <Text style={styles.flexBranchName}>{item.bizStaffName || '--'} {item.organName ? `(${item.organName})` + ' | ' : '--'} {item.claimTime}认领</Text>
          </View>
        </View>
      </View>
    )
  }

  render() {
    let { listData, status, refreshIcon } = this.state
    return (
      <View style={styles.container}>
        <View style={styles.flexBox}></View>
        {
          status == 'data' ? (
            <View style={{ flex: 1, paddingTop: 20 * scale, paddingBottom: 10 * scale }}>
              <FlatList
                data={listData}
                style={{ marginLeft: 12 * scale, marginRight: 12 * scale }}
                renderItem={this._renderListItem}
                refreshing={refreshIcon}
                onRefresh={() => { this.refresh() }}
                onEndReachedThreshold={0.1}
              />
            </View>
          ) : null
        }
        {
          status != 'data' ? (<PageStatusIndex status={status} emptyText={'暂无记录'} onErrorPress={this.reloadPage} />) : null
        }

      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: style.color.bgGray,
  },
  flexBox: {
    flexDirection: 'row',
    paddingBottom: 15 * scale,
    backgroundColor: style.color.white,
  },
  flexTitle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: 10 * scale,
  },
  flexTime: {
    fontSize: 12 * scale,
    color: '#000000',
    opacity: 0.7,
  },
  flexList: {
    backgroundColor: '#fff',
    paddingTop: 13 * scale,
    marginTop: 5 * scale,
    paddingBottom: 20 * scale,
    borderRadius: 4 * scale,
    marginBottom: 22 * scale,
  },
  flexResource: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingBottom: 13 * scale,
  },
  flexResourceName: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    paddingLeft: 12 * scale,
  },
  flexResourceText: {
    fontSize: 12 * scale,
    color: '#000',
    fontWeight: '400',
  },
  itemName: {
    marginLeft: 8 * scale,
    width: 16 * scale,
    height: 16 * scale,
  },
  itemBorder: {
    height: 1 * scale,
    backgroundColor: '#E3E7F0',
    marginBottom: 17 * scale,
  },
  flexaddress: {
    paddingRight: 24 * scale,
  },
  flexaddressName: {
    fontSize: 11 * scale,
    color: 'red',
  },
  flexProuct: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingRight: 24 * scale,
    paddingLeft: 12 * scale,
  },
  flexProuctName: {
    fontSize: 12 * scale,
    color: '#000',
    fontWeight: '600',
  },
  flexProuctMoney: {
    fontSize: 12 * scale,
    color: '#000',
    fontWeight: '500',
  },
  flexProuctMeber: {
    fontSize: 12 * scale,
    color: '#000',
    opacity: 0.8,
  },
  flexProuctnull: {
    paddingBottom: 24 * scale,
    paddingTop: 10 * scale,
  },
  flexBranch: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingRight: 24 * scale,
  },
  flexBranchName: {
    color: '#000',
    opacity: 0.8,
    fontSize: 12 * scale,
  },
  remaining: {
    color: '#E02020',
    fontSize: 10 * scale,
    //marginLeft: 10 * scale
  }
})